<!--
  @created by qfkong on 2019-12-5 09:36:02
  @updated by
  @description jobFlowGraph
-->
<div class="blank_template">
  <yu-workflow ref="refWorkflow" @init="initGraph" :height="height" @save="saveDataFn" :show-sidebar="showSidebar" work-type="workflow"
    @celldblclick="celldblclickFn" @addbtnclick="addBtnClickFn" @removecells="deleteCell" @movecell="movecell" @connected="connectedFn"
    @selectlastcell="selectLastCellFn" @selectnextcell="selectNextCellFn" :isdrawjobflowgraph="true">
    <yu-xdialog slot="dialog" :title="dialogTitle" :visible.sync="dialogVisible" width="75%" key="dialogVisible">
      <yu-xform v-show="nodetype === 'EDGE'" ref="refCirculationForm" v-model="circulationFormData" :disabled="formDisabled" label-width="120px"
        form-type="edit">
        <yu-xform-group>
          <yu-xform-item label="最小返回值" ctype="input" name="minRet"></yu-xform-item>
          <yu-xform-item label="最大返回值" ctype="input" name="maxRet"></yu-xform-item>
          <yu-xform-item label="备注" colspan="24" name="remark" ctype="textarea"></yu-xform-item>
        </yu-xform-group>
      </yu-xform>
      <yu-xform v-show="nodetype === 'TEMPLATE'" ref="modelForm" v-model="modelForm" :disabled="formDisabled" label-width="120px"
        form-type="edit">
        <yu-xform-group>
          <yu-xform-item label="模板类型" ctype="select" name="templateType" rules="required" :options="templateOptions"></yu-xform-item>
        </yu-xform-group>
        <div class="yu-grpButton">
          <yu-button type="primary" @click="nextFn">下一步</yu-button>
        </div>
      </yu-xform>
      <yu-tabs v-show="nodetype !== 'EDGE' && nodetype !== 'TEMPLATE'" type="border-card" v-model="tabsValue">
        <yu-tab-pane label="基本信息" name="baseMsg">
          <yu-xform ref="refWorkBaseForm" v-model="workBaseFormData" :disabled="formDisabled" label-width="140px" :rules="ruleslist">
            <yu-xform-group>
              <yu-xform-item label="应用系统编号" ctype="input" name="appCode" rules="required" :disabled="true"></yu-xform-item>
              <yu-xform-item label="作业类型名称" ctype="select" data-code="USE_TASK_JOB_TYPE" @change="selectTypeCodeFn" name="typeCode" rules="required"></yu-xform-item>
              <yu-xform-item label="作业代码" :disabled="isModify" ctype="input" maxlength="64" name="actionCode" rules="required"> </yu-xform-item>
              <yu-xform-item label="作业名称" ctype="input" maxlength="120" name="actionName" rules="required"></yu-xform-item>
              <yu-xform-item label="最大成功返回值" maxlength="100" :rules="rule" ctype="input" name="success"></yu-xform-item>
              <yu-xform-item label="集群代理名称" ctype="select" name="agentCode" filterable :options="agentIds" rules="required" :disabled="disabledOpr"></yu-xform-item>

              <yu-xform-item label="优先级" ctype="select" name="actionPrior" data-code="USE_FLOW_PRIORITY_LEVEL" rules="required"> </yu-xform-item>
              <!--            <yu-xform-item label="提示" ctype="custom" name="tip4ActionPrior">
                <div>优先级0-9递增，9为最高
                </div>
              </yu-xform-item> -->

              <yu-xform-item label="自动重试次数" ctype="num" maxlength="100" name="maxRetry" :rules="rule"></yu-xform-item>

              <yu-xform-item label="前提条件类型" ctype="select" name="condType" data-code="USE_FLOW_PRECONDI_TYPE" rules="required"></yu-xform-item>
              <yu-xform-item label="所依赖作业" ctype="input" name="relJobs" icon="search" readonly :on-icon-click="focusFn"></yu-xform-item>
              <yu-xform-item label="多实例运行" ctype="radio" :options="options" name="multiFlag" rules="required" :disabled="disabledOpr"></yu-xform-item>
              <yu-xform-item label="强制中断" ctype="radio" :options="options" name="intrFlag" rules="required" :disabled="disabledOpr"></yu-xform-item>
              <tr slot="append">
                <div style="width: 180%; font-size: 14px; margin: 0px 0 20px 86px;">提示：&nbsp;&nbsp;&nbsp;{{ currentTips }}</div>
              </tr>
              <yu-xform-item label="备注" colspan="24" name="remark" maxlength="240" ctype="textarea"></yu-xform-item>
            </yu-xform-group>
          </yu-xform>
        </yu-tab-pane>
        <yu-tab-pane label="执行信息"  name="exceMsg" :disabled="execPanedisable">
          <yu-row :gutter="20">
            <yu-col :span="8">
              <yu-xform ref="refWorkExceForm" label-width="120px" v-model="workExecFormData" :disabled="formDisabled">
                <yu-xform-group>
                  <yu-xform-item placeholder="执行位置修饰" label="执行位置修饰" maxlength="64" :hidden="isHiddenAction" colspan="24" ctype="input" name="actionLoc1"
                    key="actionLoc"></yu-xform-item>
                  <yu-xform-item placeholder="执行位置修饰" label="执行位置修饰" :hidden="isHiddenActionSelect" colspan="24" :options="actionLocOptions"
                    ctype="select" filterable name="actionLoc2" key="actionLocOptions" :rules="actionLoc2Rule"></yu-xform-item>
                  <yu-xform-item label="修饰提示" colspan="24" name="tip4ActionLoc" ctype="custom">
                    <div>
                      {{tip4ActionLoc}}
                    </div>
                  </yu-xform-item>
                  <yu-xform-item label="执行内容" colspan="24" name="actionExec" ctype="textarea" maxlength="1024" :rules="nodeExec" placeholder="1024个字符以内">
                  </yu-xform-item>

                </yu-xform-group>
              </yu-xform>
            </yu-col>
            <yu-col :span="16">
              <div class="el-button-group">
                <yu-button @click="btnAddClickFn" :disabled="isProcess">新增</yu-button>
                <yu-button @click="btnDelClickFn" :disabled="isProcess">删除</yu-button>
              </div>
              <yu-xtable class="params-table" :row-class-name="tableRowClassName" selection-type="checkbox" ref="refTableExec" :pageable="false"
                height="440px" style="width: 100%" :data="getData.wftParList" :rules="rules" @row-click="rowClickFnOne">
                <yu-xtable-column prop="paramName" ctype="input" label="参数名称" maxlength="64">
                </yu-xtable-column>
                <yu-xtable-column prop="paramValue" ctype="yufp-select-params" label="参数值" maxlength="250" :params="paramObj" @select-fn="getSelectedData">
                </yu-xtable-column>
                <yu-xtable-column ctype="input" prop="remark" label="备注" maxlength="240">
                </yu-xtable-column>
              </yu-xtable>
            </yu-col>
          </yu-row>
        </yu-tab-pane>
        <yu-tab-pane label="附加限制"  name="moreMsg">
          <yu-xform ref="refWorkAdditionalForm" label-width="120px" v-model="workAdditionalFormData" :disabled="formDisabled">
            <yu-xform-group>
              <yu-xform-item :colspan="2" ctype="custom" name="time">
                <p style="text-align: center; margin-left: -20px;">时间限制:</p>
              </yu-xform-item>
              <yu-xform-item :colspan="10" ctype="custom" name="timepicker">
                <yu-time-picker is-range arrow-control v-model="timepicker" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                  placeholder="选择时间范围" value-format="HHmmss" @change="timepickerChange">
                </yu-time-picker>
              </yu-xform-item>
              <!-- <yu-xform-item :colspan="6" ctype="input" :rules="limit" name="limitBegin" @blur="limitBeginFn" placeholder="6位数字表示的时分秒数值（空缺表示0时0分0秒）">
              </yu-xform-item>
              <yu-xform-item :colspan="1" ctype="custom" name="to">
                <p style="text-align: center">至</p>
              </yu-xform-item>
              <yu-xform-item :colspan="6" ctype="input" :rules="limit" name="limitEnd" @blur="limitEndFn" placeholder="6位数字表示的时分秒数值（空缺表示24时0分0秒）">
              </yu-xform-item> -->
            </yu-xform-group>
            <yu-row>
              <yu-col :span="2">
                <yu-xform-item :colspan="2" ctype="custom" name="time">
                  <p style="text-align: center">日期限制:</p>
                </yu-xform-item>
              </yu-col>
              <yu-col :span="12">
                <yu-xform-group>
                  <yu-xform-item ctype="custom" name="radio1" :colspan="5">
                    <yu-radio class="radio" v-model="workAdditionalFormData.radio1" label="1">固定日期</yu-radio>
                  </yu-xform-item>
                  <yu-xform-item ctype="yu-date-picker" type="date" name="date" :colspan="19" :disabled="radio1">
                  </yu-xform-item>
                </yu-xform-group>
                <yu-xform-group :column="4">
                  <yu-xform-item ctype="custom" name="radio2" :colspan="5">
                    <yu-radio class="radio" v-model="workAdditionalFormData.radio2" label="2">相对日期</yu-radio>
                  </yu-xform-item>
                  <yu-xform-item ctype="select" name="date1" data-code="USE_FIXED_TIME_RANGE" :colspan="7" style="margin-right:8px;" :disabled="radio2"></yu-xform-item>
                  <yu-xform-item ctype="select" name="date2" data-code="USE_FIXED_TIME_F" :colspan="7" style="margin-right:8px;" :disabled="radio2"></yu-xform-item>
                  <yu-xform-item ref="dayref" ctype="input" name="day" :colspan="4" :disabled="radio2" :rules="dayRules"></yu-xform-item>
                  <yu-xform-item :colspan="1" ctype="custom" name="date1">
                    <span style="margin-left: 8px">天</span>
                  </yu-xform-item>
                </yu-xform-group>
                <yu-xform-group>
                  <yu-xform-item ctype="custom" name="radio3" :colspan="5">
                    <yu-radio class="radio" v-model="workAdditionalFormData.radio3" label="3">日期类型</yu-radio>
                  </yu-xform-item>
                  <yu-xform-item ctype="select" name="datetype" :colspan="19" :disabled="radio3" :options="dateTypeOptions"></yu-xform-item>
                </yu-xform-group>
              </yu-col>
              <yu-col :span="3">
                <div style="text-align:center;margin-bottom:1em;margin-top: 30px;">
                  <yu-button @click="addFn">添加</yu-button>
                </div>
                <div style="text-align:center;">
                  <yu-button @click="deleteFn">删除</yu-button>
                </div>
              </yu-col>
              <yu-col :span="7">
                <ul style="border: 1px solid #bfcbd9;height:150px;overflow-y: auto;border-radius: 4px;" id="timeList">
                  <li v-for="(item, index) in timeList" :class="{timeLi: true, active: item == selectTime}" @click="timeSelectFn(item)" :key="index">{{item.value}}</li>
                </ul>
              </yu-col>
            </yu-row>
          </yu-xform>
        </yu-tab-pane>
        <yu-tab-pane label="事件信息"  name="eventMsg">
          <yu-row :gutter="20">
            <!-- <yu-col :span="6" class="event-custom-tree" style="border-right: 1px solid rgb(191, 203, 217);">
              <yu-input placeholder="事件名称" v-model="filterText" icon="search" :on-icon-click="searchFn"
                @keyup.enter.native="searchFn">
              </yu-input>
              <yu-tree ref="msgTree" :data="treeTempData" show-checkbox node-key="id" :filter-node-method="filterNode"
                style="height: 250px;overflow: auto" icon="iconPath">
              </yu-tree>
            </yu-col>
            <yu-col :span="2" style="text-align: center">
              <yu-button @click="addEventFn" style="margin-top: 120px"><i
                  class="el-icon-arrow-right el-icon--right"></i></yu-button>
            </yu-col> -->
            <yu-col>
              <yu-button @click="btnAddEventsFn">新增</yu-button>
              <yu-button @click="btnDelEventsFn">删除</yu-button>
              <yu-xtable row-number selection-type="checkbox" ref="refTableEvents" :pageable="false" style="width: 100%" :data="getData.useEventCrossList"
                height="440px" @row-click="rowClickFn" >
                <yu-xtable-column prop="appCode" label="应用系统" :show-overflow-tooltip="true" >
                </yu-xtable-column>
                <yu-xtable-column prop="appName" label="应用系统名称" :show-overflow-tooltip="true" >
                </yu-xtable-column>
                <yu-xtable-column prop="eventCode" label="事件代码" :show-overflow-tooltip="true" >
                </yu-xtable-column>
                <yu-xtable-column prop="eventName" label="事件名称" :show-overflow-tooltip="true" >
                </yu-xtable-column>
                <yu-xtable-column prop="eventType" label="事件类型" data-code="USE_EVENT_TYPE" >
                </yu-xtable-column>
                <yu-xtable-column prop="folderPath" label="事件路径" >
                </yu-xtable-column>
                <yu-xtable-column ctype="select" prop="relation" label="关联关系" data-code="USE_EVT_REL_TYPE" @change="relationChangeFn">
                </yu-xtable-column>
                <yu-xtable-column ctype="input" prop="remark" label="备注" :show-overflow-tooltip="true">
                </yu-xtable-column>
              </yu-xtable>
            </yu-col>
          </yu-row>
        </yu-tab-pane>
      </yu-tabs>
      <div class="yu-grpButton" v-if="nodetype === 'EDGE'">
        <yu-button type="primary" @click="btnSaveFn">保存</yu-button>
        <yu-button @click="btnCancelFn">取消</yu-button>
      </div>
      <div class="yu-grpButton" v-else-if="nodetype !== 'TEMPLATE'">
<!--        <yu-button type="primary" @click="lastFn" v-show="tabsValue != 'baseMsg'">上一步</yu-button>
        <yu-button type="primary" @click="nextToFn" v-show="tabsValue != 'eventMsg'">下一步</yu-button> -->
        <yu-button @click="btnCancelFn">取消</yu-button>
        <yu-button type="primary" @click="btnSaveFn">确定</yu-button>
      </div>
    </yu-xdialog>
  </yu-workflow>
  <yu-xdialog :title="selectCellDialogTitle" :visible.sync="showSelectCellDialog" width="50%">
    <yu-table ref="tableCells" :data="tableCells" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <yu-table-column type="selection" align="center" width="55">
      </yu-table-column>
      <yu-table-column prop="actionCode" label="作业代码" align="center">
      </yu-table-column>
      <yu-table-column prop="actionName" label="作业名称" align="center">
      </yu-table-column>
    </yu-table>
    <div style="padding: 20px 0 10px; text-align: center;">
      <yu-button type="primary" @click="confirmSelectCell" style="margin-right: 80px;">确定</yu-button>
      <yu-button @click="cancelSelectCell">取消</yu-button>
    </div>
  </yu-xdialog>
  <yu-xdialog title="请选择依赖作业" :visible.sync="visible" width="70%" key="visible">
    <el-form-q ref="queryJobForm" :field-data="jobFieldDatas" :buttons="jobButtons"></el-form-q>
    <el-table-x ref="jobTableRef" max-height="500" :checkbox="true" :data-url="jobDataUrl" :table-columns="jobFieldColumns"></el-table-x>
  </yu-xdialog>
  <yu-xdialog title="请选择事件" :visible.sync="eventVisible" width="70%">
    <el-form-q ref="queryEventForm" :field-data="eventFieldDatas" :buttons="eventButtons"></el-form-q>
	</yu-xform>
    <el-table-x ref="eventTableRef" max-height="500" :checkbox="true" :data-url="eventDataUrl" :table-columns="eventFieldColumns"></el-table-x>
  </yu-xdialog>
</div>
<style>
   .el-tabs--border-card{
		height: 530px;
	}
  .geSprite.geSprite-savedata {
    background-image: url('./libs/mxgraph/images/workflow/u1.png')
  }

  .geSprite.geSprite-relayout {
    background-image: url('./libs/mxgraph/images/workflow/relayout.png');
    background-size: contain
  }

  .geToolbarContainer .geSidebar {
    padding: 0;
    text-align: left;
    border-bottom-width: 0;
  }
</style>